<template>
  <div class="body_" :style="{'height': height + 'px'}">
    <div class="top_container">
      <svg-icon ref="icon1"
                title="分组"
                class="top_icon1"
                @click="iconClick('group')"
                @mouseleave="iconMove(1)"
                @mouseenter="iconEnter(1)"
                icon-class="nhgk_device">
      </svg-icon>
      <svg-icon title="楼宇"
                ref="icon2"
                class="top_icon2"
                @click="iconClick('louyu')"
                @mouseleave="iconMove(2)"
                @mouseenter="iconEnter(2)"
                icon-class="nhgk_tree">
      </svg-icon>
    </div>
        <div class="tree_div" v-if="selected === 'group'">
      <div class="search">
        <el-input placeholder="请输入关键词" v-model="keyword2" suffix-icon="el-icon-search" size="mini"></el-input>
      </div>
      <div class="elTree1">
        <div class="elTree2">
          <el-tree :data="accessGroups"
              :default-expanded-keys="expandedIds"
              :default-checked-keys="selectedAccess"
              :filter-node-method="filterNode"
              ref="tree2"
              node-key="id"
              highlight-current
              show-checkbox
              @check="handleCheckChange"
              @node-click="handleGroupNodeClick">
                  <span class="custom-tree-node" slot-scope="{ data }">
                    <span><svg-icon :style="{color: mainColor}" class-name="treeIconOther" icon-class="group4"></svg-icon> {{ '  ' }}</span>
                    <span v-if="data.key !='device'">{{ data.label +' '+'('+data.num+')' }}</span>
                    <span v-if="data.key =='device'">{{ data.label }}</span>
                  </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="tree_div" v-else>
      <div class="search">
        <el-input placeholder="请输入关键词" v-model="keyword1" suffix-icon="el-icon-search"></el-input>
      </div>
      <div class="elTree1">
        <div class="elTree2">
          <el-tree :data="buildOptions"
              :default-expanded-keys="expandedIds"
              :default-checked-keys="selectedAccess"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              highlight-current
              show-checkbox
              @check="handleCheckChange"
              @node-click="handleBuildNodeClick">
              <!-- <el-checkbox-group v-model="checkList"> -->
                  <span class="custom-tree-node" slot-scope="{ data }">
                    <span v-if="data.buildingType === '0'"><svg-icon :style="{color: mainColor}" class-name="treeIconOther" icon-class="nhgk_park"></svg-icon> {{ '  ' }}</span>
                    <span v-if="data.buildingType === '1'"><svg-icon :style="{color: mainColor}" class-name="treeIconOther" icon-class="nhgk_building"></svg-icon> {{ '  ' }}</span>
                    <span v-if="data.buildingType === '2'"><svg-icon :style="{color: mainColor}" class-name="treeIconOther" icon-class="nhgk_unit"></svg-icon> {{ '  ' }}</span>
                    <span v-if="data.buildingType === '3'"><svg-icon :style="{color: mainColor}" class-name="treeIconOther" icon-class="nhgk_floor"></svg-icon> {{ '  ' }}</span>
                    <span v-if="data.key !='device'">{{ data.label +' '+'('+data.num+')' }}</span>
                    <span v-if="data.key =='device'">
                      <!-- <el-checkbox :label="data.id"/> -->
                      {{ data.label }}
                    </span>
                  </span>
              <!-- </el-checkbox-group> -->
          </el-tree>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import $ from 'jquery'

export default {
  props: {
    isUser: {
      type: Boolean,
      default: false
    },
    expandAll: {
      type: Boolean,
      default: false
    },
    buildOptions: {
      type: Array,
      default: ()=>[]
    },
    accessGroups: {
      type: Array,
      default: ()=>[]
    },
    selectedAccess: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      iconOpen1: false,
      iconOpen2: false,
      keyword1: '',
      keyword2: '',
      height: window.innerHeight * this.getRatio() - 300,
      selected: 'group',
      deviceList: [],
      defaultProps: {
        children: "children",
        label: "label",
        disabled: true
      },
      defaultGroupProps: {
        children: "children",
        label: "label",
        disabled: true
      },
      checkedIds: [],
      expandedIds: ['0'],
      //禁用
      existedIds: [],

    };
  },
  computed: {
    ...mapGetters(['mainColor'])
  },
  watch: {
    '$store.state.app.screenHeight': function () { //监听屏幕高度变化
      this.height=window.innerHeight * this.getRatio() - 100;
    },
    keyword1(val) {
      this.$refs.tree1.filter(val);
    },
    keyword2(val) {
      this.$refs.tree2.filter(val);
    },
    accessGroups(val) {
      if (this.selectedAccess && this.selectedAccess.length > 0) {
        this.setDisabled(val)
      }
    },
    buildOptions(val) {
      if (this.selectedAccess && this.selectedAccess.length > 0) {
        this.setDisabled(val)
      }
    },
    houseDevices(val) {
      this.$nextTick(() => {
        if (val && val.length > 0 && this.existedIds.length > 0) {
          if (this.$refs.tree1) {
            this.existedIds.forEach(e => {
              let node = this.$refs.tree1.getNode(e);
              if (node)
                node.data.disabled = true
            })
            this.selected = ''
            setTimeout(() => {
              this.selected = 'louyu'
            }, 10)
          }
        }
      })
    },
    deviceList(val) {
      this.$nextTick(() => {
        if (val && val.length > 0 && this.existedIds.length > 0) {
          this.deviceList[0].children.forEach(d => {
            if (this.existedIds.indexOf(d.id) !== -1) {
              d.disabled = true
            }
          })
        }
      })
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      const selectedAccess = []
      if (checked.checkedNodes.length > 0) {
        checked.checkedNodes.forEach(item => {
          if (item.key === 'device') {
            selectedAccess.push(item.accessControl.code)
          }
        })
      }
      this.$emit('checkChange', selectedAccess)
    },

    // 递归函数，给每层树赋值disabled
    setDisabled(obj) {
      obj.forEach((item) => {
        this.$set(item, 'disabled', true);
        if (item.children) {
          this.setDisabled(item.children);
        }
      });
      return obj;

    },
    handleBuildNodeClick(data) {
      console.log(data);
      this.$emit('nodeClick', data.id, 'build')
    },
    handleGroupNodeClick(data) {
      this.$emit('nodeClick', data.id, 'group')
    },
    handleNodeClick(data) {
      this.$emit('nodeClick', data.id, data.label, data.key)
    },
    iconClick(a) {
      this.selected = a
      if (a == 'louyu') {
        $(".top_icon1").css('color', this.$store.getters.mainColor)
        $(".top_icon1").css('border-color', this.$store.getters.mainColor)
        $(".top_icon2").css('color', '#000000')
        $(".top_icon2").css('border-color', 'rgba(0, 0, 0, 0.2)')
      }
      if (a == 'group') {
        $(".top_icon2").css('color', this.$store.getters.mainColor)
        $(".top_icon2").css('border-color', this.$store.getters.mainColor)
        $(".top_icon1").css('color', '#000000')
        $(".top_icon1").css('border-color', 'rgba(0, 0, 0, 0.2)')
      }
    },
    filterNode(value, data, node) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    iconEnter(flag) {
      if (flag === 1) {
        this.iconOpen1 = true
      } else {
        this.iconOpen2 = true
      }
    },
    iconMove(flag) {
      if (flag === 1) {
        this.iconOpen1 = false
      } else {
        this.iconOpen2 = false
      }
    }

  },
};
</script>

<style scoped>
.ban {
  color: #ccc !important;
}

.body_ {
/*  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);*/
  background-color: #fff;
  position: relative;
}

.tree_div {
  height: calc(100% - 67px);
  position: relative;
}

.elTree1 {
  height: calc(100% - 41px);
  overflow-y: auto;
}

.search {
  width: 95%;
  margin: 7px auto 5px auto;
  /*margin-top: 7px;*/
}

.top_container {
  height: 50px;
  border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
}

.top_icon1 {
  font-size: 25px;
  transition: all .1s linear;
  display: inline-block;
  padding: 4px 5px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
  margin: 16px 6px 0 27px;
  color: #000000;
}

.top_icon2 {
  font-size: 25px;
  transition: all .1s linear;
  display: inline-block;
  padding: 4px 5px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
  margin: 16px 6px 0 27px;
  color: #000000;
}

.top_icon1:last-child {
  margin-left: 0
}

.top_icon2:last-child {
  margin-left: 0
}

.top_icon1:hover {
  cursor: pointer;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}

.top_icon2:hover {
  cursor: pointer;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}

.treeIcon {
  font-size: 16px;
  /*color: #409EFF;*/
}

.treeIconOther {
  height: 13px !important;
  width: 13px !important;
  vertical-align: -2px !important;
}
</style>
